import React, { Component } from 'react'
import {nanoid} from 'nanoid'
// import {ADDPERSON} from '../../redux/constant'
import {addPerson} from '../../redux/actions/person'
import {connect} from 'react-redux'

class Person extends Component {

  addPerson = ()=>{
    const name = this.nameNode.value
    const age = this.ageNode.value
    const person = {
      id:nanoid(),
      name,
      age
    }
    this.props.addPerson(person)
    console.log('您输入的姓名是：',name,'；您输入的年龄是：',age)
  }

  render() {
    return (
      <div>
        <h1>我是Person组件</h1>
        <input type="text" ref={c=>this.nameNode = c} placeholder="请输入姓名"/>
        <input type="text" ref={c=>this.ageNode = c} placeholder="请输入年龄"/>
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.person.map(person=>{
              return <li key={person.id}>姓名：{person.name} --- 年龄：{person.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

export default connect(
  (state)=>(
    {
      count:state.count,
      person:state.person
    }
  ),
  /*
    connect 方法的一个简写方法，
    第一个参数是函数 返回值是对象 分别map一下store里面的值
    第二个参数使用简单写法只需要传递一个对象，分别key value对应的是修改状态的方法
  */ 
  {addPerson:addPerson}
)(Person)
